export const graphLibs = {
  connecting: {
    snap: true,
    allowBlank: false,
    allowMulti: false, // 是否允许在相同的起始节点和终止之间创建多条边
    allowLoop: false, // 是否允许创建循环连线，即边的起始节点和终止节点为同一节点
    highlight: true, // 拖动边时，是否高亮显示所有可用的节点
    router: 'manhattan',
    connector: {
      // 边渲染到画布后的样式
      name: 'rounded',
      args: {
        radius: 8
      }
    },
    // 点击 magnet 时 根据返回值来判断是否新增边，触发时机是 magnet 被按下，如果返回 false，则没有任何反应，如果返回 true，会在当前 magnet 创建一条新的边
    validateMagnet({ magnet }) {
      return magnet.getAttribute('port-group') !== 'in'
    },

    // 在移动边的时候判断连接是否有效，如果返回 false，当鼠标放开的时候，不会连接到当前元素，否则会连接到当前元素。
    validateConnection({ sourceMagnet, targetMagnet }) {
      if (!sourceMagnet || sourceMagnet.getAttribute('port-group') === 'in') {
        return false
      }
      // 只能连接到输入链接桩
      return targetMagnet && (targetMagnet.getAttribute('port-group') === 'in' || targetMagnet.getAttribute('port-group') === 'all')
    }
  },
  highlighting: {
    magnetAdsorbed: {
      name: 'stroke',
      args: {
        padding: 12,
        attrs: {
          opacity: 0.3,
          'stroke-width': 10,
          stroke: '#409EFF',
          fill: '#fff'
        }
      }
    }
  },
  panning: {
    enabled: true,
    modifiers: ['ctrl'],
    eventTypes: ['leftMouseDown']
  },
  mousewheel: {
    enabled: true, // 支持滚动放大缩小
    zoomAtMousePosition: true,
    modifiers: 'ctrl',
    minScale: 0.1,
    maxScale: 2
  },
  grid: {
    visible: true,
    type: 'doubleMesh',
    args: [
      {
        color: '#eee', // 主网格线颜色
        thickness: 1 // 主网格线宽度
      },
      {
        color: '#ddd', // 次网格线颜色
        thickness: 1, // 次网格线宽度
        factor: 4 // 主次网格线间隔
      }
    ]
  }
}

export const ZOOM_OUT = -0.1
export const ZOOM_IN = 0.1

const commonAttrs = {
  body: {
    fill: '#fff',
    stroke: '#8f8f8f',
    strokeWidth: 1
  },
  label: {
    refX: 0.5,
    refY: '100%',
    refY2: 4,
    textAnchor: 'middle',
    textVerticalAnchor: 'top'
  }
}

export const nodes = [
  {
    shape: 'start-event',
    type: 'event',
    text: '开始事件'
  },
  {
    shape: 'end-event',
    type: 'event',
    text: '结束事件'
  },
  // {
  //   shape: 'exclusive-gateway',
  //   type: 'gateway',
  //   text: '条件分支',
  //   icon: 'X'
  // },
  // {
  //   shape: 'parallel-gateway',
  //   type: 'gateway',
  //   text: '并行网关',
  //   icon: '+'
  // },
  {
    shape: 'activity',
    type: 'activity',
    text: '审批人',
    img: 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*pwLpRr7QPGwAAAAAAAAAAAAAARQnAQ'
  }
]

export const gatewayPorts = {
  top: {
    position: 'top',
    attrs: {
      circle: {
        magnet: true,
        stroke: '#8f8f8f',
        r: 5
      }
    }
  },
  bottom: {
    position: 'bottom',
    attrs: {
      circle: {
        magnet: true,
        stroke: '#8f8f8f',
        r: 5
      }
    }
  },
  left: {
    position: 'left',
    attrs: {
      circle: {
        magnet: true,
        stroke: '#8f8f8f',
        r: 5
      }
    }
  },
  right: {
    position: 'right',
    attrs: {
      circle: {
        magnet: true,
        stroke: '#8f8f8f',
        r: 5
      }
    }
  }
}
